<template>
  <LoginFormTitle v-if="getShow" />
  <div
    v-if="getShow"
    v-motion
    :initial="{ opacity: 0, y: 100 }"
    :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
  >
    <QrCode
      :value="qrCodeUrl"
      :width="280"
      :options="{
        color: { dark: '#000' }
      }"
      logo="/resource/img/logo.png"
    />
    <el-divider>{{ $t('qrCodeLogin.sure') }}</el-divider>

    <el-button round @click="handleBackLogin" style="width: 100%; height: 40px">
      {{ $t('register.backSignIn') }}
    </el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, unref } from 'vue'
import LoginFormTitle from './LoginFormTitle.vue'
import { QrCode } from '@/components/Qrcode/index'
import { LoginStateEnum, useLoginState } from '../useLogin'

export default defineComponent({
  name: 'QrCodeForm',
  components: { LoginFormTitle, QrCode },
  setup() {
    // 切换登录/注册/其他登录的表单
    const { handleBackLogin, getLoginState } = useLoginState()
    const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)

    const qrCodeUrl = 'https://gitee.com/li_ya_xu/niu-admin/tree/master'

    return {
      handleBackLogin,
      getShow,
      qrCodeUrl
    }
  }
})
</script>

<style scoped lang="scss"></style>
